<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :destroyOnClose="true"
      :minHeight="650"
      :width="1400"
      :showCancelBtn="false"
      :showOkBtn="false"
    >
      <template #title>
        <Space>
          <span>任务详情</span>
          <Divider type="vertical" />
          <span style="font-size: 12px; color: #999">所属项目名称</span>
          <Divider type="vertical" />
          <span style="font-size: 12px; color: #999">项目负责人</span>
          <Divider type="vertical" />
          <Tooltip title="标记里程碑">
            <Icon icon="lucide:milestone" size="24" />
          </Tooltip>
          <Divider type="vertical" />
          <Tooltip title="标记交付件">
            <Icon icon="mdi:tag-outline" size="24" />
          </Tooltip>
        </Space>
      </template>
      <Row>
        <Col :span="16" :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <Row>
            <Col :span="24" style="font-size: 24px">任务名称</Col>
          </Row>
          <Row style="margin-top: 10px">
            <Col :span="4" :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
              <div class="task-operation">
                <div class="task-operation-icon">
                  <img src="../../../assets/svg/projectManager/taskNumber.svg" />
                </div>
                <div class="task-operation-content">
                  <div class="content-title">1</div>
                  <div class="content-tips">任务编号</div>
                </div>
              </div>
            </Col>
            <Col :span="5" :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
              <div class="task-operation">
                <div class="task-operation-icon">
                  <img src="../../../assets/svg/projectManager/stop.svg" />
                </div>
                <div class="task-operation-content">
                  <div class="content-title">已暂停</div>
                  <div class="content-tips">任务状态</div>
                </div>
              </div>
            </Col>
            <Col :span="5" :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
              <div class="task-operation">
                <div class="task-operation-icon">
                  <img src="../../../assets/svg/projectManager/manager.svg" />
                </div>
                <div class="task-operation-content">
                  <div class="content-title">张泽源</div>
                  <div class="content-tips">任务执行人</div>
                </div>
              </div>
            </Col>
            <Col :span="5" :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
              <div class="task-operation">
                <div class="task-operation-icon">
                  <img src="../../../assets/svg/projectManager/startTime.svg" />
                </div>
                <div class="task-operation-content">
                  <div class="content-title">2023-11-30</div>
                  <div class="content-tips">计划开始时间</div>
                </div>
              </div>
            </Col>
            <Col :span="5" :xs="12" :sm="12" :md="5" :lg="5" :xl="5">
              <div class="task-operation">
                <div class="task-operation-icon">
                  <img src="../../../assets/svg/projectManager/endTime.svg" />
                </div>
                <div class="task-operation-content">
                  <div class="content-title">2023-12-01</div>
                  <div class="content-tips">计划结束时间</div>
                </div>
              </div>
            </Col>
          </Row>
          <!-- 标签页 -->
          <Tabs>
            <TabPane key="1">
              <template #tab>
                <Icon icon="bi:list-task" />
                任务信息
              </template>
              <BasicForm @register="registerForm" />
            </TabPane>
            <TabPane key="2">
              <template #tab>
                <Icon icon="lets-icons:subttasks-alt" />
                子任务
              </template>
              <Card>
                <template #title>
                  <span class="tasks-count">共1个任务</span>
                </template>
                <template #extra>
                  <Icon icon="material-symbols-light:add-box-outline" />
                  新建
                </template>
                <List>
                  <ListItem>
                    <ListItemMeta description="张泽源 创建于 2023年11月28日 09:08">
                      <template #title>子任务名称</template>
                      <template #avatar>
                        <img src="../../../assets/svg/projectManager/childTask.svg" />
                      </template>
                    </ListItemMeta>
                    <div>
                      <Tag color="red">未开始</Tag>
                    </div>
                  </ListItem>
                </List>
              </Card>
            </TabPane>
            <TabPane key="3">
              <template #tab>
                <Icon icon="material-symbols:attach-file" />
                附件
              </template>
              <Card>
                <template #title>
                  <span class="tasks-count">共1个附件</span>
                </template>
                <template #extra>
                  <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" />
                </template>
                <List>
                  <ListItem>
                    <ListItemMeta description="张泽源 创建于 2023年11月28日 09:08">
                      <template #title>附件名称</template>
                      <template #avatar>
                        <img src="../../../assets/svg/projectManager/childTask.svg" />
                      </template>
                    </ListItemMeta>
                    <div>
                      <Tooltip title="检入">
                        <Icon icon="solar:check-square-broken" size="24" />
                      </Tooltip>
                      <Divider type="vertical" />
                      <Tooltip title="修改">
                        <Icon icon="jam:write" size="24" />
                      </Tooltip>
                      <Divider type="vertical" />
                      <Tooltip title="下载">
                        <Icon icon="ion:download-outline" size="24" />
                      </Tooltip>
                      <Divider type="vertical" />
                      <Tooltip title="删除">
                        <Icon icon="material-symbols:delete-outline" size="24" />
                      </Tooltip>
                    </div>
                  </ListItem>
                </List>
              </Card>
            </TabPane>
          </Tabs>
        </Col>
        <Col :span="8" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <Tabs>
            <TabPane key="first">
              <template #tab> 评论 </template>
              111
            </TabPane>
            <TabPane key="second">
              <template #tab> 活动 </template>
              <List
                class="activity-loadmore-list"
                item-layout="horizontal"
                :loading="loading"
                :data-source="dataList"
              >
                <template #loadMore>
                  <div
                    :style="{
                      textAlign: 'center',
                      marginTop: '12px',
                      height: '32px',
                      lineHeight: '32px',
                    }"
                  >
                    <a-spin v-if="loadingMore" />
                    <a-button v-else @click="loadMore">加载更多</a-button>
                  </div>
                </template>
                <ListItem>
                  <div class="activity-container">
                    <div class="activity-member">
                      <img
                        src="../../../assets/svg/projectManager/manager.svg"
                        style="display: inline-block; width: 30px"
                      />
                      张泽源
                      <span class="activity-member-date">2023-12-01 16:53</span>
                    </div>
                    <div class="activity-item">
                      <div class="activity-detail">
                        <div class="activity-summary">发表评论</div>
                        <div class="activity-desc">测试数据</div>
                      </div>
                    </div>
                  </div>
                </ListItem>
              </List>
            </TabPane>
            <TabPane key="third">
              <template #tab> 任务审批 </template>
              333
            </TabPane>
          </Tabs>
        </Col>
      </Row>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal } from '/@/components/Modal';
  import {
    Space,
    Divider,
    Row,
    Col,
    Tabs,
    TabPane,
    Tooltip,
    Card,
    List,
    ListItemMeta,
    ListItem,
    Tag,
  } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { BasicForm, useForm } from '/@/components/Form';
  import { getTaskDetail } from './tableData';
  import { BasicUpload } from '/@/components/Upload';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useLoadMore } from 'vue-request';

  const getFakeData = () => ``; //这里是一个promise类型，返回活动的接口
  const { dataList, loading, loadingMore, loadMore } = useLoadMore(getFakeData, {
    listKey: 'results',
  });
  const [registerForm] = useForm({
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
    schemas: getTaskDetail(),
    fieldMapToTime: [['planTime', ['starttime', 'endtime'], 'YYYY-MM-DD']],
    showResetButton: false,
    showSubmitButton: false,
  });
  const { createMessage } = useMessage();
  const handleChange = (list: string[]) => {
    createMessage.info(`已上传文件${JSON.stringify(list)}`);
  };
</script>

<style lang="less" scoped>
  ::v-deep(.rc-virtual-list-scrollbar-thumb) {
    visibility: hidden !important;
  }

  ::v-deep(.ant-calendar-picker) {
    width: 100% !important;
  }

  .task-operation {
    cursor: pointer;
    display: inline-flex;
    align-items: center;

    .task-operation-content {
      margin-left: 10px;

      .content-tips {
        color: #aaa;
        font-size: 12px;
      }
    }
  }

  .tasks-count {
    color: #999;
  }

  .activity-loadmore-list {
    min-height: 350px;
  }

  .activity-container {
    padding: 15px 0 10px;

    .activity-member {
      padding-left: 28px;

      .activity-member-date {
        color: #aaa;
        font-size: 12px;
        margin-left: 6px;
      }
    }

    .activity-detail {
      margin-top: 11px;
      color: #5f6e8e;
      padding-left: 28px;

      .activity-summary {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .activity-desc {
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #666;
      }
    }
  }
</style>
